<template>
  <div
    class="vc-column"
    :class="currNode.children.length === 0 ? 'empty' : ''"
    :style="visual.parseStyle(compStyle)"
  >
    <div class="vc-row" v-for="(row, i) in currNode.children" :key="i">
      <draggable
        v-for="(col, j) in row.children"
        :key="j"
        class="vc-col"
        :style="'width: ' + col.width + '%'"
        v-model="currNode.children[i].children[j]"
        :class="!col.children || col.children.length === 0 ? 'empty' : ''"
        @mouseoverNode="mouseoverNode"
        @activeNode="activeNode"
        @deleteNode="deleteNode"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import Draggable from '@/admin/visual/draggable.vue';
import tool from "@/utils/tool";
import visual from "@/visual/js/visual";

const emit = defineEmits(['activeNode', 'deleteNode', 'mouseoverNode'])
const props = defineProps({
  node: Object,
  compStyle: Object
});
const currNode = ref(props.node);

const activeNode = (node) => {
  emit('activeNode', node);
};

const deleteNode = (item) => {
  emit('deleteNode', item, currNode.value.children);
};

const mouseoverNode = (item) => {
  emit('mouseoverNode', item)
};

const updateChildren = () => {
  const compStyle = props.compStyle || {};
  const rowCnt = compStyle['row'] || 1;
  const colCnt = parseInt(compStyle['col'] || '2');

  const widths = [];
  if (!compStyle['span'] || compStyle['span'].split(',') < colCnt) {
    const avgSpan = 100/colCnt;
    for (let index=0; index<colCnt; index++) {
      widths.push(avgSpan);
    }
  } else {
    const spans = [];
    let total = 0;
    for (let item of compStyle['span'].split(',')) {
      total += parseInt(item || '1');
      spans.push(parseInt(item || '1'));
    }
    for (let index=0; index<spans.length; index++) {
      widths.push(spans[index]*100/total);
    }
  }

  const rows = currNode.value.children;
  const rowResult = [];
  for (let i=0; i<rowCnt; i++) {
    let row;
    if (rows.length > i) {
      row = rows[i];
    } else {
      row = {
        id: tool.uuids(),
        name: '行-' + (i + 1),
        builtin: true,
        children: []
      };
    }

    const cols = row.children || [];
    const colResult = [];
    for (let j=0; j<colCnt; j++) {
      if (cols.length > j) {
        colResult.push(cols[j]);
      } else {
        colResult.push({
          id: tool.uuids(),
          name: '列-' + (i + 1) + '-' + (j + 1),
          builtin: true,
          children: []
        });
      }
      colResult[j].width = widths[j];
    }
    row.children = colResult;
    rowResult.push(row);
  }

  currNode.value.children = rowResult;
};

watch(() => props.compStyle, () => {
  updateChildren();
}, {deep: true});

onMounted(() => {
  updateChildren();
});
</script>

<style scoped lang="scss">
.vc-column {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  .vc-row {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
  }
  .vc-col {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
  }
}
</style>